<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/quick_layout.css"/>
    <script src="./js/jquery.js"></script>
</head>
<body>
<div class="tc">
    通过超链接改变页面地址：
</div>
<div class="tc mt10 mb10">
    <a href="demo3.html">demo3</a>
</div>
<div class="tc">
    通过pushState改变页面地址：
</div>
<div class="tc mt10 mb10">
    <button type="button" onclick="pushState('foo.html');">pushState('foo.html')</button>
    <button type="button" onclick="pushState('bar.html');">pushState('bar.html')</button>
</div>
<div id="log" class="tc">

</div>
<script>
    function pushState(page) {
        history.pushState({}, '', page);
        log();
    }

    log();

    function log() {
        $('#log').html('当前历史记录栈中的总条目数：' + history.length);
    }

</script>
</body>
</html>